<template>
  <el-dialog v-model="show" :title="type ? '修改材质' : '添加材质'" width="20%" align-center @close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-form-item label="材质名称" prop="attributeName">
        <el-input v-model="ruleForm.attributeName" placeholder="请输入材质名称" style="width: 200px;" />
      </el-form-item>
      <el-form-item v-for="(item, index) in ruleForm.joinList" :key="item.type" :label="`${item.label}的价格`"
        :prop="`joinList.${index}.price`" :rules="[
          { required: true, message: `请输入${item.label}的价格`, trigger: 'blur' }
        ]">
        <el-input v-model="item.price" type="number" @input="(val: any) => item.price = val < 0 ? 0 : val"
          :placeholder="`请输入${item.label}的价格`" style="width: 200px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">{{ type ? '修 改' : '添 加' }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close', 'modify']);

const show = ref(false);
const type = ref('')

watch(() => props.visible, async (newValue) => {
  show.value = newValue
  if (newValue) {
    if (props.initList?.joinList && Object.keys(props.initList?.joinList).length > 0) {
      type.value = '1'
      ruleForm.value = props.initList?.joinList.item
    } else {
      type.value = ''
      ruleForm.value.joinList = props.initList?.volume_interval.map((item: any, index: number) => {
        return {
          label: item.label,
          type: item.value,
          price: null,
        }
      })
    }

  }
}, { deep: true });

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({
  attributeName: '',
  joinList: []
})

const rules = reactive<any>({
  attributeName: [
    { required: true, message: '请输入材质名称', trigger: 'blur' },
  ],
})


const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const query = JSON.parse(JSON.stringify(ruleForm.value))
      if (type.value) {
        proxy?.$modal.msgSuccess('修改成功');
        emits('modify', {
          index: props.initList?.joinList.index,
          data: query
        });
      } else {
        proxy?.$modal.msgSuccess('添加成功');
        emits('submit', {
          ...query,
          attributeType: props.initList?.attributeType
        });
      }

      handleClose();
    } else {
      console.log('error submit!', fields)
    }
  })
}


const handleClose = () => {
  ruleFormRef.value?.resetFields();
  emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>
